import React from "react"
import Link from "next/link"
import { ArrowRight, Play } from "lucide-react"
import { Button } from "@/components/ui/button"

/**
 * 核心价值展示区
 */
const SectionHero = () => {
  return (
    <section className="py-20 md:py-32">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-text-primary mb-6">构建下一代 AI 工作流</h1>
        <p className="text-xl text-text-secondary mb-10 max-w-3xl mx-auto">
          Flow Forge 是一个强大的可视化 AI 工作流平台，帮助您轻松编排复杂的人工智能任务，释放数据的真正潜力。
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <Button
            size="lg"
            className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-lg px-8 py-6"
          >
            立即开始
            <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
          <Button size="lg" variant="outline" className="text-lg px-8 py-6" asChild>
            <Link href="/">
              <Play className="mr-2 w-5 h-5" />
              查看演示
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}

export default SectionHero
